<template>
  <!--预览模板 目录列表 -->
  <div style="width: 200px" class="v-d-left">
    <div class="sidebarbox " :class="sidebarboxFixed">
      <!-- 目录 -->
      <div class="contenbox" style="padding-top:0;">
        <span class="text-title-m">目录</span>
        <el-tree
          ref="tree"
          :data="getTemplate"
          :props="defaultProps"
          node-key="item_id"
          :default-expanded-keys="[38]"
          :default-checked-keys="[39]"
          @node-click="handleNodeClick"
        />
      </div>
    </div>
  </div>
</template>

<script>
// 获取目录下模块及变量
import { getTemplateQuestionList } from '@/api/stencil'
export default {
  name: 'DatabaseSidebar',
  props: {
    getTemplate: { type: Array, default: () => [] } // 渲染的目录头部
  },
  data() {
    return {
      defaultProps: {
        children: 'items',
        label: 'item_name',
        disabled: 'disabled'
      },
      database_id: '',
      template_id: ''
    }
  },
  created() {
    this.database_id = this.$store.state.user.getSelect.id
    this.template_id = this.$store.state.user.getSelect.template_id
  },
  methods: {
    async   handleNodeClick(data) {
      console.log(data) // 这里就是选中的数据
      // 用户点击触发之后需要判断用户点击的是否有items如果有就不做处理 如果没有在调用接口发送请求
      if (data.items) {
        if (data.items.length >= 1) {
          console.log('进来说明有items')
          return
        }
      }
      // 这里就是正常的调用接口
      this.newGetTemplateQuestionList(this.database_id, this.template_id, data.item_id)
    },
    // 封装获取目录下模块及变量
    async newGetTemplateQuestionList(database_id, template_id, item_id) {
      const res = { database_id, template_id, item_id, need: ['need_question', 'need_option', 'need_hide'] }
      const list = await getTemplateQuestionList(res)
      console.log('拿到数据', list)
      // this.directoryList = list
      // 将数据传递给父元素
      this.$emit('managementVariable', list)
    }
  }

}
</script>

<style lang='scss' scoped>
.first_content_name {
  padding: 10px 12px;
  color: #101010;
  font-size: 16px;
}

.content-item-1 {
  padding: 10px 15px;
  padding-left: 45px;
}
.content-name {
  background-color: #f2f8ff !important;
  color: #3593f8 !important;
}

.v-d-left .no-select {
  color: #bfbfbf !important;
}
.v-d-left span {
  color: #333;
}
.first_content_name {
  padding: 10px 12px;
  color: #101010;
  font-size: 16px;
}
.first_content_name span {
  display: -moz-inline-box;
  display: inline-block;
  /* //对超出内容隐藏 */
  max-width: 140px;
  overflow: hidden;
  /* //	显示省略符号来代表被修剪的文本 */
  text-overflow: ellipsis;
  /* 	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
  white-space: nowrap;
}
.first_content_name span:hover {
  /* max-width: 200px; */
  overflow: auto;

  text-overflow: clip;

  white-space: normal;
}

.first_content_name:hover {
  background-color: #fafafa;
}
.content-item:hover {
  max-width: 180px;
  overflow: auto;

  text-overflow: clip;

  white-space: normal;
}

.content-item-1:hover {
  background-color: #fafafa;
}
.template-item-1 {
  padding: 10px 0;
  width: 95%;
}
.template-item-1:hover {
  background-color: #eff0f1;
}

.content-item {
  display: -moz-inline-box;
  display: inline-block;
  /* //对超出内容隐藏 */
  max-width: 140px;
  overflow: hidden;
  /* //	显示省略符号来代表被修剪的文本 */
  text-overflow: ellipsis;
  /* 	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
  white-space: nowrap;
}

/* .content-item:hover {
    background-color: #E6E6E6;

    } */

.content-name span {
  color: #3593f8 !important;
}
.contenbox {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  padding-top: 10px;
  margin-bottom: 20px;
}
.text-title-m {
  font-size: 20px;
  margin-left: 20px;
}
.sidebarbox {
  background-color: white;
  margin-top: 20px;
  padding-bottom:10px ;
}
.sidebarboxFixed{
  max-height: 80vh;
  overflow: auto;
  position: fixed;
}
 .scrollbar {
  width : 30px;
  height: 300px;
  margin: 0 auto;
  }
  ::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
  ::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #D3D3D3;
  }
  ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  // border-radius: 10px;
  background   : #ededed;
  }

.pointer {
  cursor: pointer;
}
.baocun{
  color: white!important;;
}
::v-deep.el-dialog__body{
  padding: 0  20px!important;
}
</style>
